// 获取父容器
const svgsContainer = document.getElementById("svgs-container");

// 读取本地 JSON 文件
fetch("./json/data-svgs.json")
  .then(response => {
    if (!response.ok) {
      throw new Error("无法加载数据！");
    }
    return response.json();
  })
  .then(data => {
    // 遍历 JSON 数据并生成 DOM 元素
    data.forEach(item => {
      const svgItem = document.createElement("div");
      svgItem.classList.add("svgs-item");

      // 如果有链接，设置点击跳转
      if (item.link) {
        svgItem.setAttribute("onclick", `window.location.href='${item.link}'`);
      }

      // 创建图片
      const img = document.createElement("img");
      img.src = item.imgSrc;
      img.alt = item.title;

      // 创建标题
      const title = document.createElement("p");
      title.textContent = item.title;

      // 将图片和标题添加到 svgItem
      svgItem.appendChild(img);
      svgItem.appendChild(title);

      // 将 svgItem 添加到父容器
      svgsContainer.appendChild(svgItem);
    });
  })
  .catch(error => {
    console.error("加载 JSON 数据失败：", error);
  });

// 轮播图
// 图片数组和对应的按钮背景颜色
const images = [
  {src: "./imgs/banner1.png", buttonColor: "#8a6b55"},
  {src: "./imgs/banner2.png", buttonColor: "#c3cfdf"},
  {src: "./imgs/banner3.png", buttonColor: "#ccc1b4"},
];

let currentIndex = 0;

const carouselImage = document.getElementById("carousel-image");
const buttons = document.querySelectorAll(".tool-button");
const header = document.querySelector(".header");

// 设置初始的背景颜色
updateCarousel();

// 每3秒自动轮播
setInterval(() => {
  currentIndex = (currentIndex + 1) % images.length;
  updateCarousel();
}, 3000);

// 更新轮播图和按钮背景颜色
function updateCarousel() {
  // 更新图片
  carouselImage.src = images[currentIndex].src;

  // 更新所有按钮的背景颜色
  buttons.forEach(button => {
    button.style.backgroundColor = images[currentIndex].buttonColor;
  });
  header.style.backgroundColor = images[currentIndex].buttonColor;
}
